<template>
    <v-app id="inspire">
        <v-navigation-drawer
                v-model="drawer"
                app
        >
            <br/>
<!--            Login user-->
            <v-list v-if="user!=''">
<!--                <v-list-item>-->
<!--                    <v-list-item-avatar>-->
<!--                        <v-img :src="user.avatar"></v-img>-->
<!--                    </v-list-item-avatar>-->
<!--                </v-list-item>-->
                <v-menu offset-y open-on-hover transition="slide-y-transition">
                    <template v-slot:activator="{ on, attrs }">
                        <v-list-item>
                            <v-spacer></v-spacer>
                            <v-avatar>
                                <img :src="user.img"></img>
                            </v-avatar>
                            <v-spacer></v-spacer>
                            <v-avatar>
                                <img src="https://i.loli.net/2021/07/21/nX6bwi7ECmaekDz.png">
                            </v-avatar>
                            <v-spacer></v-spacer>
                        </v-list-item>
                        <v-list-item link v-bind="attrs" v-on="on">
                            <v-list-item-content>
                                <v-list-item-title class="title">
                                    {{user.name}}
                                </v-list-item-title>
                                <v-list-item-subtitle>{{user.email}}</v-list-item-subtitle>
                            </v-list-item-content>

                            <v-list-item-action>
                                <v-icon>mdi-menu-down</v-icon>
                            </v-list-item-action>
                        </v-list-item>
                    </template>
                    <v-list
                            nav
                            dense
                    >
                        <v-list-item-group
                                v-model="selectedUserItem"
                                color="primary"
                        >
                            <v-list-item href="https://user.jxjlife.cn/admin" v-if="user.type==-1 || user.type==0">
                                <v-list-item-title>后台</v-list-item-title>
                            </v-list-item>
                            <v-list-item :to="'/user/'+user.id">
                                <v-list-item-title>个人主页</v-list-item-title>
                            </v-list-item>
                            <v-list-item href="https://user.jxjlife.cn">
                                <v-list-item-title>个人中心</v-list-item-title>
                            </v-list-item>
                            <v-list-item @click="userLogout">
                                <v-list-item-title>登出</v-list-item-title>
                            </v-list-item>
                        </v-list-item-group>
                    </v-list>
                </v-menu>
            </v-list>
<!--            Not login-->
            <v-list v-if="user==''">
<!--                <v-list-item>-->
<!--                    <v-list-item-avatar>-->
<!--                        - -->
<!--                    </v-list-item-avatar>-->
<!--                </v-list-item>-->
                <v-list-item>
                    <v-avatar>
                        <img src="https://i.loli.net/2021/07/21/nX6bwi7ECmaekDz.png">
                    </v-avatar>
                </v-list-item>
                <v-list-item link>
                    <v-list-item-content @click="$router.push('/login')">
                        <v-list-item-title class="title">
                            未登录
                        </v-list-item-title>
                        <v-list-item-subtitle>-</v-list-item-subtitle>
                    </v-list-item-content>

                    <v-list-item-action @click="$router.push('/login')">
                        <v-icon>mdi-login</v-icon>
                    </v-list-item-action>
                </v-list-item>
            </v-list>
            <v-divider></v-divider>
<!--            menu-->
            <v-list
                    nav
                    dense
            >
                <v-list-item-group
                        v-model="selectedItem"
                        color="primary"
                >
                    <v-list-item
                            v-for="item in items"
                            :key="item.path"
                            :to="item.path"
                            v-if="item.meta.icon"
                    >
                        <v-list-item-icon>
                            <v-icon v-text="item.meta.icon"></v-icon>
                        </v-list-item-icon>

                        <v-list-item-content>
                            <v-list-item-title v-text="item.meta.text"></v-list-item-title>
                        </v-list-item-content>
                    </v-list-item>

                    <v-list-item href="https://gitee.com/DamanY/chinese-ol/issues" target="_blank">
                        <v-list-item-icon>
                            <v-icon>mdi-check-circle</v-icon>
                        </v-list-item-icon>

                        <v-list-item-content>
                            <v-list-item-title>反馈</v-list-item-title>
                        </v-list-item-content>
                    </v-list-item>
                </v-list-item-group>
            </v-list>
        <v-divider v-if="user==''"></v-divider>
            <v-list v-if="user==''">
                <v-list-item>
                    登录即可投稿、评论、留言。
                </v-list-item>
                <v-list-item>
                    <v-btn outlined target="_blank" color="primary" href="/login"> 登 录 <v-icon small>mdi-login</v-icon> </v-btn>
                </v-list-item>
                <v-list-item>
                    <v-btn outlined target="_blank" color="primary" href="/sign"> 注 册 <v-icon small>mdi-account-plus-outline</v-icon> </v-btn>
                </v-list-item>
            </v-list>
        <v-divider></v-divider>
            <v-list>
                <v-list-item>
                    版权声明
                </v-list-item>
                <v-list-item>
                    <span style="color: gray">
                        纪中三鑫双语学校 师生
                        <br/>
                        保留一切权力
                    </span>
                </v-list-item>
                <v-list-item>
                    <span style="color: gray">
                        © 2021-present.
                        <br/>
                        All rights reserved.
                    </span>
                </v-list-item>
                <v-list-item>
                    <span style="color: orange">
                        Powered by <a style="text-underline: orange;color: orange" href="https://damanyang.cn" target="_blank">Daman</a>
                    </span>
                </v-list-item>
            </v-list>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>

        </v-navigation-drawer>

        <v-app-bar app>
            <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
            <v-toolbar-title style="font-weight: bold;cursor: pointer" @click="$router.push('/')">尽心尽力写生活</v-toolbar-title>
            <v-spacer class="search-input"></v-spacer>
            <v-text-field class="search-input"
                          clearable
                    prepend-inner-icon="mdi-magnify"
                    @keyup.enter.native="jumpToSearch"
                    style="margin-top: 25px;"
                    dense
                    label="搜索"
                    solo
                    v-model="keywords"
                          v-if="$route.path!='/search'"
            ></v-text-field>
            <v-spacer></v-spacer>
            <v-btn tile icon href="https://gitee.com/DamanY/chinese-ol" target="_blank"><v-icon>mdi-github</v-icon></v-btn>
            <v-btn tile icon href="https://damany.gitee.io/chinese-ol/" target="_blank"><v-icon>mdi-file-document-edit-outline</v-icon></v-btn>
        </v-app-bar>

        <v-main>
            <router-view :class="drawer?'block':'home-box'" style="margin-top: 10px"></router-view>
        </v-main>
    </v-app>
</template>

<script>
    export default {
        name: "Index",
        data: () => ({
            user: '',
            drawer: null,
            selectedItem: 0,
            selectedUserItem: -1,
            items: [],
            userItems: [
                { text: '后台' },
                { text: '个人主页' },
                { text: '个人中心' },
                { text: '登出' },
            ],
            keywords: '',
        }),
        created() {
            this.selectedItem = this.getRoutes();
            this.items = this.$router.options.routes[0].children;
            this.get_user();
        },
        methods:{
            userLogout(){
                this.logout();
                location.reload();
            },
            get_user(){
                const t = this;
                this.getUser().then(function (resp) {
                    t.user = resp.data;
                })
            },
            jumpToSearch(){
                this.$router.push('/search?wd='+this.keywords);
                this.keywords = '';
            },
            getRoutes(){
                let path = this.$route.path;
                let routes = this.$router.options.routes[0].children;
                for (let i = 0; i < routes.length; i++){
                    if (path==routes[i].path){
                        return i;
                    }
                }
            },
        }
    }
</script>
<style scoped>
    .search-input{
        display: block;
    }
    @media screen and (max-width: 960px) {
        .search-input{
            display: none;
        }
    }

    .block{
        margin-left: 1%;
        margin-right: 1%;
    }
    .home-box{
        margin-left: 10%;
        margin-right: 10%;
    }
    @media screen and (max-width: 600px){
        .home-box{
            margin-left: 2%;
            margin-right: 2%;
        }
    }
    .v-navigation-drawer ::-webkit-scrollbar{
        display: none;
    }
</style>